<template>
  <div>
    <el-tabs v-model="is_patrol" type="card" @click="isPatrolChange">
      <el-tab-pane label="不合格任务" :name="1"></el-tab-pane>
      <el-tab-pane label="未整改隐患" :name="2"></el-tab-pane>
    </el-tabs>

    <el-table v-if="Isname" :data="tableData" v-loading="taskDataLoading">
      <div>111</div>

      <el-table-column label="任务名称" prop="name" width="160"> </el-table-column>
      <el-table-column label="巡查规则名称" prop="rule_name" width="160"> </el-table-column>
      <el-table-column label="巡查人员" prop="realname" width="100"> </el-table-column>
      <!-- <el-table-column label="单位名称" prop="unit_name" width="100"></el-table-column> -->
      <el-table-column label="是否有隐患" prop="is_danger" width="110">
        <template #default="scope">
          <span>{{ scope.row.is_danger == 0 ? '无' : '有' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否有故障" prop="is_fault" width="110">
        <template #default="scope">
          <span>{{ scope.row.is_fault == 0 ? '无' : '有' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="add_time" :formatter="formatDate" width="165"> </el-table-column>
      <el-table-column label="开始时间" prop="start_time" :formatter="formatDate" width="165"> </el-table-column>
      <el-table-column label="结束时间" prop="end_time" :formatter="formatDate" width="165"> </el-table-column>
      <el-table-column label="完成时间" prop="last_add_time" :formatter="formatDate" width="165"> </el-table-column>
      <el-table-column width="100" label="巡查结果" prop="result">
        <template #default="scope">
          <span :style="scope.row.result == '不合格' ? 'color:red' : ''"> {{ scope.row.result }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" fixed="right" label="操作">
        <template #default="scope">
          <div>
            <el-button size="mini" @click="showTaskDetail(scope.row)">查看</el-button>
            <!-- <el-popconfirm
                confirm-button-text="删除"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="确定删除？"
                @confirm="delTask(scope.row)"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button size="mini" type="danger">删除</el-button>
                </template>
              </el-popconfirm> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-table
      v-else
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'id', order: 'ascending' }"
      v-loading="tableDataLoading"
    >
      <el-table-column label="点位名称" prop="point_name"> </el-table-column>
      <el-table-column label="隐患等级" prop="danger_level"> </el-table-column>
      <el-table-column label="隐患位置" prop="address"> </el-table-column>
      <el-table-column label="隐患来源" prop="danger_source" :formatter="hiddenDangerFrom"> </el-table-column>
      <el-table-column label="隐患描述" prop="check_remark"> </el-table-column>
      <el-table-column label="隐患状态" prop="status" :formatter="hiddenDangerStatus"> </el-table-column>
      <el-table-column label="创建时间" prop="create_time" :formatter="formatDate"> </el-table-column>
      <el-table-column fixed="right">
        <template #default="scope">
          <el-button size="mini" @click="checkDanger(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :current-page="pagination.size"
        :total="total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        class="pagination"
        background
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
  // 分页
  mixins: [paginationMixin],
  data() {
    return {
      // 总页数
      total: 0,
      tableData: [],
      hiddenDangerSourceOptions: [
        { label: '公众', key: 1 },
        { label: '监管机构', key: 2 },
        { label: '维保单位', key: 3 },
        { label: '社会单位', key: 4 }
      ],
      loading: false,
      pagination: {},

      tableDataLoading: false,
      taskDataLoading: false,
      search: '',
      Isname: true,
      tableDataInfo: '',
      searchValue: '',
      dangerLevelOptions: ['重大隐患', '一般隐患'],
      dangerStatusOptions: [
        {
          key: 1,
          label: '未整改'
        },
        {
          key: 2,
          label: '待审核'
        },
        {
          key: 3,
          label: '已整改'
        }
      ],
      seacrForm: {
        point_name: '',
        danger_level: '',
        status: '1'
      }
    }
  },
  created() {
    this.getDataList1()
  },

  methods: {
    refreshBtn() {
      let tempData = this.seacrForm
      for (let key in tempData) {
        tempData[key] = ''
      }
      this.seacrForm = tempData
      this.getDataList()
    },
    hiddenDangerFrom(row, column, cellValue, index) {
      let temp = ['', '公众', '监管机构', '维保单位', '社会单位']
      return temp[cellValue]
    },
    hiddenDangerStatus(row, column, cellValue, index) {
      let temp = ['', '未整改', '待审核', '已整改']
      return temp[cellValue]
    },
    getDataList2(page) {
      this.tableDataLoading = true
      // 分页
      let query = {
        rows: this.pagination.size,
        page: this.pagination.page,
        user_info: this.$store.state.user.user_info.region_id,
        keywords: this.searchValue,
        ...this.seacrForm
      }
      this.$api
        .post('/unit/Danger/Lists', query)
        .then((res) => {
          this.tableData = res.data.list
          this.tableDataInfo = res.data
          this.total = res.data.total
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    },

    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.getLists(e)
    },
    checkDanger(index, row) {
      if (!this.isDialog) {
        this.$router.push({
          name: 'hiddenDangerRecord',
          query: {
            id: row.id
          }
        })
      } else {
        this.$emit('showDetailDialog', row.id)
      }
    },
    isPatrolChange(e) {
      console.log(this.is_patrol, this.is_patrol == 1)
      if (this.is_patrol !== 1) {
        this.Isname = false
        this.getDataList2()
      } else {
        this.Isname = true
        this.getDataList1()
      }
      // this.resetFilter();
      //   this.initTaskList();
    },
    formatDate(row, column, time, index) {
      return this.$getDateTime(time)
    },
    patrolResult(patrol_result) {
      let temp = ['', 'overdue-num', 'unqualified-num']
      return temp[patrol_result]
    },
    formatterTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue)
    },
    getDataList1(page) {
      var timestamp = new Date().getTime()
      let params = {
        rows: this.pagination.size,
        page: page || this.pagination.page,
        patrol_status: 2,
        result: 1,
        start_time: [timestamp - 31104000000, timestamp]
      }
      if (this.$route.query.jumpUnitId) {
        params.unit_id = this.$route.query.jumpUnitId
      }
      this.$apis
        .post('/unit/PatrolTask/lists', params)
        .then((res) => {
          this.tableData = res.data.lists
          this.pagination = res.data
          this.total = res.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleSizeChange(e) {},
    onCurrentChange(e) {
      this.getLists(e)
    },
    showTaskDetail(row) {
      this.$router.push({
        name: 'unitTaskMangeDetail',
        query: {
          id: row.id
        }
      })
      //查看详细
      //   this.taskDetailVisible = true;
    }
  }
}
</script>
<style scoped lang="scss">
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.searchBox {
  margin: 20px;
  display: flex;
  background-color: #fff;
  padding: 20px;
  .input {
    width: 10%;
    margin-right: 15px;
  }
  .hint {
    line-height: 40px;
    margin-right: 10px;
  }
  .searchBtn {
    background-color: #2d8cf0;
    color: #fff;
  }
}
.resultImg .checkImg {
  width: 60;
  height: 60;
  position: relative;
  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 60;
    background: url('@/assets/images/errorImg.png') no-repeat;
    background-size: 100%;
    background-color: #fff;
  }
}
</style>
